<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea name="" id="" placeholder="输入框"></textarea>
  <button>发送</button>
  <h1>消息列表</h1>
  <div class="list">
    <p>默认消息</p>
  </div>

  <script>
    // 获取页面中的textarea、button、h1和.list元素
    const textarea = document.querySelector('textarea')
    const button = document.querySelector('button')
    const h1 = document.querySelector('h1')
    const list = document.querySelector('.list')

    // 监听button的点击事件
    button.addEventListener('click',()=>{
      const message = textarea.value.trim()
      console.log(message)

      // 创建一个新的p元素 <p></p>
      const newP = document.createElement('p')
      // 将获取到的消息内容赋值给新的p元素<p>message</p>
      newP.innerText = message

      // 头部添加
      list.prepend(newP) // 场景1：发送的朋友圈在前面添加
      // 结尾添加
      list.append(newP) // 场景2：微信聊天消息在末尾添加

      // 为新的p元素添加点击事件监听器
      newP.addEventListener('click',()=>{
        // 在点击p元素时，移除该p元素
        newP.remove()
      })
    })
  </script>
</body>
</html>